<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人资料 - 考试座位管理系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            background-color: #f8f9fa;
            padding-top: 20px;
        }
        .profile-container {
            max-width: 800px;
            margin: 0 auto;
        }
        .card {
            border-radius: 10px;
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
            margin-bottom: 20px;
        }
        .btn-primary {
            background-color: #0d6efd;
            border-color: #0d6efd;
        }
    </style>
</head>
<body>
    <div class="container profile-container">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header bg-primary text-white">
                        <h3 class="mb-0">个人资料</h3>
                    </div>
                    <div class="card-body">
                        <div th:if="${success}" class="alert alert-success" role="alert">
                            <span th:text="${success}"></span>
                        </div>
                        
                        <div th:if="${error}" class="alert alert-danger" role="alert">
                            <span th:text="${error}"></span>
                        </div>
                        
                        <div class="row mb-4">
                            <div class="col-md-4">
                                <div class="text-center">
                                    <img src="https://via.placeholder.com/150" class="rounded-circle img-thumbnail" alt="Profile Picture">
                                    <h4 class="mt-2" th:text="${user.username}">用户名</h4>
                                    <p class="text-muted" th:text="${user.role}">用户角色</p>
                                </div>
                            </div>
                            <div class="col-md-8">
                                <form th:action="@{/users/profile/update}" method="post">
                                    <div class="mb-3">
                                        <label for="username" class="form-label">用户名</label>
                                        <input type="text" class="form-control" id="username" th:value="${user.username}" readonly>
                                    </div>
                                    <div class="mb-3">
                                        <label for="fullName" class="form-label">姓名</label>
                                        <input type="text" class="form-control" id="fullName" name="fullName" th:value="${user.fullName}">
                                    </div>
                                    <div class="mb-3">
                                        <label for="email" class="form-label">邮箱</label>
                                        <input type="email" class="form-control" id="email" name="email" th:value="${user.email}">
                                    </div>
                                    <div class="mb-3">
                                        <label for="createdAt" class="form-label">注册时间</label>
                                        <input type="text" class="form-control" id="createdAt" th:value="${user.createdAt != null ? #temporals.format(user.createdAt, 'yyyy-MM-dd HH:mm') : '未知'}" readonly>
                                    </div>
                                    <div class="mb-3">
                                        <label for="lastLogin" class="form-label">最后登录时间</label>
                                        <input type="text" class="form-control" id="lastLogin" th:value="${user.lastLogin != null ? #temporals.format(user.lastLogin, 'yyyy-MM-dd HH:mm') : '从未登录'}" readonly>
                                    </div>
                                    <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                                        <button type="submit" class="btn btn-primary">保存修改</button>
                                        <a th:href="@{/users/change-password}" class="btn btn-secondary">修改密码</a>
                                        <a th:href="@{/dashboard}" class="btn btn-outline-secondary">返回首页</a>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>